<template>
    <div class="container">
      <header class="header">
        <div class="headers">
          <p>时光记</p>
          <router-link to="/login" tag="p" >登录</router-link>
          <router-link to="/register" tag="p">注册</router-link>
        </div>
        <img src="../assets/logo.jpg" alt="" srcset="">
      </header>
      <section class="content">
        <div class="con"><i class="iconfont icon-yonghuming"></i><input type="text" placeholder="用户名" name="username" v-model="username"></div>
        <div class="con"><i class="iconfont icon-mima"></i><input type="password" placeholder="密码" name="password" v-model="password"></div>
        <div class="con1">
          <i class="iconfont icon-wechat"></i>
          <i class="iconfont icon-qq"></i>
          <i class="iconfont icon-tubiao214"></i>
        </div>
      </section>
 
      <footer class="footer" @click="tap()">登录</footer>  
    </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui';
export default {
    name:'Login',
    data() {
      return {
        username:'',
        email:'',
        password:'',
        yzm:'',
        phonenum:''
      }
    },
    methods: {
      tap(){
        var _this=this;
        if(this.username!==""&&this.password!==""){
          axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/login.php',
            params:{username:this.username,password:this.password},
          }).then(function(data){
            console.log()
            if(data.data.code==1){
              Toast({
              message: '登录成功',
              iconClass: 'iconfont icon-duihao'
            });

            setTimeout(() => {
             _this.$router.push('/silkbag')
            }, 3200); 
          }        
				})
        }else{
          Toast({
            message: '密码有误',
            iconClass: 'iconfont icon-failure'
          })
        }
      },
      register(){

      }
    },
}
</script>

<style scoped>
	*{
  	font-size: 16px!important;
  }
  .container{
    height: 100%;
    display: flex;
    flex-direction: column    
  }
  .header{
    height: 55%;
  }
  .header img{
    width: 100%
  }
  .headers{
    height: 44px;
    display: flex;
    justify-content: space-between;
  }
  .headers p{
    /* flex: 1; */
    width:25%;
    background: #56A5E8;
    text-align: center;
    line-height: 42px;
    border-radius:20px
  }
  .content{
     height: 34%;
     width: 100%;
  }
  .con{
    margin: 6% 3% 4%;
    height: 19%;
    border-bottom: 1px solid #cccccc
   
  }
  .con1{
    margin: 6% 3% 4%;
    height: 14%;
    float: right
  }
  .con1 i{
    margin: 0 3%
  }
  .con .iconfont{
    margin-left: 4px;
    font-size: 18px
  }
  .con input{
    width: 91%;
    border: 0;
    outline: none;
    font-size: 18px;
    text-indent: 8px
  }
  .footer{
    width: 100%;
    height: 9%;
    background: #56A5E8;
    text-align:center;
    line-height: 66px;
    margin-top: 10%;
  }
  .headers .router-link-active{
    background: #F0E7D1
  }
</style>